// 整个页面设置背景图片
body,
html {
   width: 100%;
   height: 100%;
}

// 定义公共边框图片样式
.borderPublic() {
   border-image: url('../images/border.png') 50 38 22 132;
   border-image-width: 2.0833rem 1.5833rem .9167rem 5.5rem;
}

// 定义动画样式
@keyframes move {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-15rem);
   }
}

// body设置背景图片
body {
   background: url(../images/bg.jpg) no-repeat;
   background-size: cover;

   // 主体大容器
   .view {
      width: 100%;
      min-width: 42.6667rem;
      max-width: 80rem;
      background: url(../images/logo6.png) no-repeat;
      background-size: contain;
      padding: 0 .8333rem .8333rem;
      box-sizing: border-box;
      display: flex;

      //  左侧容器
      .left_continer {
         margin-top: 3.5833rem;
         flex: 3;

         // 左侧上
         .left_top_continer {
            width: 100%;
            height: 4.5833rem;
            .borderPublic();
            display: flex;
            justify-content: space-around;
            align-items: center;

            .item {
               h4 {
                  font-size: 1.0833rem;
               }

               p {
                  font-size: .6667rem;
                  color: #0070ff;
               }
            }
         }

         // 左侧中
         .left_middle_continer {
            width: 100%;
            height: 19.8333rem;
            margin: .8333rem 0;
            .borderPublic();

            // 标题
            .title {
               height: 2.5rem;
               align-items: center;
               display: flex;
               padding-left: 1.25rem;

               a.active {
                  color: #0070ff;
               }

               a {
                  font-size: 1rem;
               }

               .line {
                  width: .1667rem;
                  height: 1rem;
                  background-color: aqua;
                  margin: 0 .8333rem;
               }
            }

            //副标题
            .subtitle {
               height: 1.5833rem;
               line-height: 1.5833rem;
               background-color: rgba(255, 255, 255, .1);
               padding: 0 1.25rem;

               span {
                  display: block;
                  float: left;
                  color: #00f2f1;
                  font-size: .5833rem;
                  height: 1.5833rem;

                  &:nth-child(2) {
                     margin-left: 3.3333rem;
                     margin-right: 8.9583rem;
                  }

               }
            }

            // 列表容器
            .listBox {
               height: 15rem;

               .content {
                  overflow: hidden;
                  height: 100%;

                  li {
                     padding: 0 1.25rem;
                     height: 1.5rem;
                     line-height: 1.5rem;

                     span {
                        display: block;
                        float: left;
                        color: #0070ff;
                     }

                     span:nth-child(1) {
                        width: 5.75rem;
                     }

                     span:nth-child(2) {
                        width: 11.25rem;
                     }

                     &:hover {
                        background-color: rgba(255, 255, 255, .1);
                        cursor: pointer;
                     }
                  }

                  ul {
                     animation: move 20s linear infinite;

                     &:hover {
                        animation-play-state: paused;
                     }
                  }
               }
            }
         }

         // 左侧下
         .left_bottom_continer {
            .borderPublic();
            height: 14.0833rem;

            // 标题
            .title {
               height: 2.9167rem;
               line-height: 2.9167rem;
               padding-left: 1.25rem;
               font-size: 1rem;
            }

            // 内容区域
            .content {
               display: flex;
               padding: 0 1.25rem;

               .pieBox {
                  flex: 1;
                  height: 10rem;
                  margin-right: .8333rem;
               }

               .msg {
                  width: 7rem;
                  height: 10rem;
                  background: url(../images/rect.png) no-repeat;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-around;

                  h4 {
                     font-size: 1rem;
                     margin-bottom: .8333rem;
                  }

                  span {
                     font-size: .75rem;
                     color: #0070ff;
                  }
               }
            }
         }
      }

      // 中间容器
      .middle_continer {
         margin: 4.9167rem .8333rem 0;
         flex: 4;

         .title {
            height: 2.2917rem;
            line-height: 2.2917rem;
            font-size: .9167rem;

            span {
               color: #0070ff;
            }
         }

         // 地图
         .map {
            height: 21.6667rem;
         }

         // 柱状图
         .barBox {
            margin-top: .8333rem;
            height: 14rem;
            .borderPublic();

            // 标题
            .title {
               height: 2.9167rem;
               line-height: 2.9167rem;
               padding-left: 1.25rem;
            }

            // 柱状图
            .content {
               display: flex;
               padding: 0 1.25rem;

               .bar {
                  flex: 1;
                  height: 9.75rem;
                  margin-right: .8333rem;
               }

               .meg {
                  width: 6.9167rem;
                  height: 9.75rem;
                  background: url('../images/rect.png') no-repeat;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-around;

                  .item {
                     h4 {
                        font-size: 1rem;
                     }

                     p {
                        font-size: .75rem;
                        color: #0070ff;

                        span {
                           color: orangered;
                        }
                     }
                  }
               }
            }
         }
      }

      // 右侧容器
      .right_continer {
         margin-top: 3.5833rem;
         flex: 3;

         // 右侧第一个
         .right_top_continer {
            height: 6rem;
            .borderPublic();

            .title {
               display: flex;
               align-items: center;
               height: 2.9167rem;
               padding-left: 1.25rem;

               a {
                  font-size: .9167rem;
               }

               a.active {
                  color: #0070ff;
               }

               .line {
                  width: .1667rem;
                  height: .9167rem;
                  background-color: #00f2f1;
                  margin: 0 .8333rem;
               }
            }

            .content {
               padding-left: 1.25rem;

               .item {
                  .msg {
                     margin-right: 6.25rem;
                     float: left;

                     &:last-child {
                        margin-right: 0;
                     }

                     h4 {
                        font-size: .8333rem;
                     }

                     p {
                        color: #0070ff;
                     }
                  }
               }
            }
         }

         // 右侧第二个
         .right_two_continer {
            height: 10.25rem;
            .borderPublic();
            margin: .8333rem 0;

            .title {
               display: flex;
               height: 2.2917rem;
               align-items: center;
               padding-left: 1.25rem;

               h3 {
                  font-size: .9167rem;
               }

               a {
                  font-size: .75rem;
                  padding: 0 .2083rem;
                  margin: 0 .2083rem;
               }

               a.active {
                  background-color: #549cfd;
                  border-radius: .2083rem;
               }

               .line {
                  width: 4px;
                  height: .9167rem;
                  background-color: #00f2f1;
                  margin: .2083rem .8333rem 0;
               }
            }

            .content {
                padding: 0 .75rem  0 .8333rem;
               .linebar {
                  height: 7.8333rem;
               }
            }

         }

         // 右侧第三个
         .right_three_continer {
             display: flex;
             justify-content: space-between;
             
             .item {
                .borderPublic();
                height: 9.5833rem;
                flex: 1;

                &:nth-child(1) {
                    margin-right: .8333rem;
                }

                .title{
                    padding-left: 1.25rem;
                    height: 2.9167rem;
                    line-height: 2.9167rem;
                    font-size: .9167rem;
                }

                .content {
                    padding: 0 1.25rem;
                    .box {
                       float: left;
                       margin-bottom: .8333rem;
                       h3 {
                         font-size: .8333rem;
                       }
                       p {
                         font-size: .5833rem;
                         color: #0070ff;
                       }
                       &:nth-child(2n) {
                          margin-left: 3.3333rem;
                          float: right;
                       }
                    }
                }
             }

             .progress_box {
                 position: relative;
                 h1 {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                 }
             }
             //销售进度
             .progress {
                 height: 3.3333rem;
                
                 
             }
         }

         // 右侧最后一个盒子
         .right_bottom_continer {
             .borderPublic();
             height: 11.6667rem;
             margin-top: .8333rem;

             .title{
                height: 2.5rem;
                line-height: 2.5rem;
                padding-left: 1.25rem;
                a {
                   font-size: .9167rem;
                   width: 8.75rem;
                   display: inline-block;
                   &:last-child {
                      font-size: .5833rem;
                      color: #05a9d9;
                      width: auto;
                   }
                }
             }

             .content_bttom {
                 padding: 0 1.25rem;

                 .left_list {
                     float: left;
                     width: 7.1667rem;
                     li {
                          height: 2.5rem;
                          line-height: 2.5rem;
                          color: #00f2f1;
                          span {
                            font-size: .9167rem;
                            margin-right: .4167rem;
                          }
                     }
                 }

                 .left_content {
                    float: left;
                    .list_title { 
                       float: left;
                       .item {
                           height: 1.3333rem;
                           line-height: 1.3333rem;
                           font-size: .5833rem;
                           width: 6.6667rem;
                           padding: 0 .4167rem;
                           box-sizing: border-box;
                           color: #05a9d9;
                           span {
                               width: 2.5rem;
                               display: inline-block;
                               vertical-align: middle;
                               &:last-child { 
                                  width: auto;
                                  vertical-align: middle;
                               }
                           }
                       }
                       .item.active {
                           background-color: rgba(255,255,255,0.2);
                       }
                    }

                    .list_content{
                      float: left;
                      width: 6.25rem;
                      background-color: rgba(255,255,255,.2);
                      padding: 0 .4167rem;
                      box-sizing: border-box;

                      .item {
                          height: 1.3333rem;
                          line-height: 1.3333rem;
                          font-size: .5833rem;
                          color: #05a9d9;
                          span {
                             display: inline-block;
                             width: 2.0833rem;
                             &:last-child {
                                 width: auto;
                                 vertical-align: middle;
                             }
                          }
                      }
                    }
                 }
             }
         }
      }
   }
}